<template>
    <div class="body">
        <div class="header">
            <img src="../../assets/images/dwgg1.jpg" alt="">
        </div>
        <div class="yaoqing">
            <h3>我的邀请码</h3>
            <h1>{{codeshare}} <span v-clipboard:copy="codeshare" v-clipboard:success="onCopy"
                                    v-clipboard:error="onError">复制</span></h1>
            <h2>邀请到更多好友，限时领取更多福利哦</h2>
            <dl @click="$router.push({path: '/share',query:{id:'111',user_id:user_id}})">
                <img src="../../assets/img/team_img_yqbj.png" alt="">
                <dd>立即邀请</dd>
            </dl>
        </div>

        <div class="center">
            <p>单位:元</p>
            <h1>￥{{lj|money}}</h1>
            <h2>累计利益</h2>
            <div id="chartbox">
                <div id="myChart" ref="myChart" style="width: 100%;height: 100%;"></div>
            </div>
            <ul>
                <li>
                    <span>￥{{lx|money}}</span>
                    <i>拉新收益</i>
                </li>
                <li>
                    <span>￥{{hy|money}}</span>
                    <i>会员收益</i>
                </li>
                <li>
                    <span>￥{{fc|money}}</span>
                    <i>任务分成</i>
                </li>
            </ul>
        </div>
        <div v-if="this.teamList.length<1">
            <div class="btnYq" @click="$router.push({path: '/share',query:{id:'111',user_id:user_id}})">立即邀请</div>
        </div>


        <div class="btmbox" v-if="this.teamList.length>0">
            <h1>团队详情</h1>
            <div>
                <table cellpadding="0" cellspacing="0">
                    <thead>
                    <th>用ID</th>
                    <th>加入时间</th>
                    <th>手机号</th>
                    <th>推荐奖励</th>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in teamList" :key="index">
                        <td>{{item.user_id}}</td>
                        <td>{{item.reg_date}}</td>
                        <td>{{item.mobile}}</td>
                        <td>￥{{item.total_money | money}}</td>
                    </tr>
                    </tbody>
                </table>
                <h2 @click="$router.push('/teamdetial')">点击查看更多</h2>
            </div>
        </div>
        <div class="btmBox"></div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import {axiosPost} from "../../axios";
    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/pie')
    export default {
        name: "",
        data() {
            return {
                codeshare: '',
                chartW:300,
                chartH:300,
                lx:0,
                hy:0,
                fc:0,
                lj:0,
                teamList:[],
                recode:'',
                user_id:''
            }
        },
        mounted() {
            this.recode = this.$route.query.recode;
            let userinfo = localStorage.getItem('userinfo');
            if(!userinfo){
                this.$router.push({path:'/login',query:{recode:this.recode}});
                return
            }
            this.user_id = JSON.parse(userinfo).user_id;
            // 以下两种方案均可
            window.addEventListener("resize", this.resizeTheChart);

            this.getTeam();

            this.getTeamlist();
        },
        methods: {
            onCopy() {
                Toast({
                    message:'复制成功',
                    duration: 1000
                });
            },
            onError() {
                Toast({
                    message:'复制失败',
                    duration: 1000
                });
            },
            resizeTheChart(){
                this.drawLine();
            },
            drawLine() {
                let that = this;
                let deviceWidth = document.documentElement.clientWidth || window.innerWidth;
                if(deviceWidth>=750){
                    deviceWidth = 750;
                }
                let chartW = deviceWidth*336/750;
                let chartH = deviceWidth*336/750;
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['0', '1', '2',]
                    },
                    itemStyle:{
                        borderWidth:5, //设置border的宽度有多大
                        borderColor:'#fff',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['100%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'right'
                            },
                            labelLine: {
                                show: false
                            },
                            itemStyle:{
                                borderWidth:4, //设置border的宽度有多大
                                borderColor:'#fff',
                            },
                            data: [
                                {value: that.fc, name: '任务分成', itemStyle:{
                                        normal:{
                                            color:"#FF462D",
                                        }
                                    }},
                                {value: that.hy, name: '会员收益', itemStyle:{
                                        normal:{
                                            color:"#6670F3",
                                        }
                                    }},
                                {value: that.lx, name: '拉新收益', itemStyle:{
                                        normal:{
                                            color:"#FCDD59",
                                        }
                                    }}
                            ]
                        }
                    ]
                };
                document.getElementById('chartbox').innerHTML='<div class="chart" id="myChart" style="width:'+chartW+'px;height:'+chartH+'px;margin: 0 auto;"></div>';
                myChart = echarts.init(document.getElementById('myChart'));
                myChart.setOption(option);
            },
            //获取我的团队信息
            getTeam(){
                axiosPost('team/my_team',{
                    'user_id':JSON.parse(localStorage.getItem('userinfo')).user_id
                },(res)=>{
                    if(res.code===-2){
                        localStorage.removeItem('userinfo');
                        Toast({
                            message:'登录过期，请重新登录',
                            duration: 1000
                        });
                        setTimeout(()=>{
                            this.$router.push({path:'/login',query:{recode:this.recode}});
                            sessionStorage.recode = this.recode;
                        },1500);
                        return
                    }
                    //console.log(res)
                    if(res.code!==1){
                        return Toast(res.msg)
                    }
                    this.lx = res.data.pull_money;
                    this.hy = res.data.lvl_money;
                    this.fc = res.data.task_money;
                    this.lj = res.data.all_money;
                    this.codeshare = res.data.recode;
                    //let num = 10;
                    this.drawLine();
                });
            },
            //获取队员列表
            getTeamlist(){
                axiosPost('team/team_list',{
                    'user_id':JSON.parse(localStorage.getItem('userinfo')).user_id,
                    'select_type':0
                },(res)=>{
                    if(res.code===-2){
                        localStorage.removeItem('userinfo');
                        Toast({
                            message:'登录过期，请重新登录',
                            duration: 1000
                        });
                        setTimeout(()=>{
                            this.$router.push({path:'/login',query:{recode:this.recode}});
                            sessionStorage.recode = this.recode;
                        },1500);
                        return
                    }
                    //console.log(res)
                    if(res.code!==1){
                        return
                    }
                    this.teamList = res.data;
                });
            }
        },
        beforeDestroy() {
            window.removeEventListener("resize", this.resizeTheChart);
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/default";

    .body {
        background: @color4;
    }

    .header {
        height: 2.2rem;
        border-radius: 0.07rem;
        width: 6.7rem;
        margin: 0.4rem auto 0.2rem;
        overflow: hidden;

        img {
            height: 2.2rem;
        }
    }

    .btnYq{
        width: 6.7rem;
        margin: 0.5rem auto 0;
        background:@color1;
        border-radius:0.43rem;
        font-size:0.32rem;
        font-weight:400;
        color:@color4;
        padding: 0.27rem 0;
        text-align: center;
    }

    .yaoqing {
        padding: 0.2rem 0.4rem;
        position: relative;

        h3 {
            font-size: @font28;
            font-weight: bold;
            color: @color3;
        }

        h1 {
            font-size: 0.66rem;
            font-weight: 400;
            color: @color3;

            span {
                display: inline-block;
                width: 1.42rem;
                border: 1px solid @color2;
                border-radius: 0.43rem;
                text-align: center;
                font-size: 0.45rem;
                padding: 0.08rem 0;
                font-weight: 400;
                color: @color2;
                -webkit-transform: scale(0.5) translate(-50%,10%);
                transform: scale(0.5) translate(-50%, 10%);
            }
        }

        h2 {
            font-size: @font24;
            font-weight: 400;
            color: @color2;
            margin-top: -0.1rem;
        }

        dl {
            width: 1.56rem;
            height: 1.52rem;
            position: absolute;
            right: 0.4rem;
            bottom: 0.1rem;

            img {
                width: 1.05rem;
                height: 0.92rem;
                display: block;
                margin: 0 auto;
            }

            dd {
                width: 1.56rem;
                padding: 0.08rem 0;
                background: @color1;
                border-radius: 0.26rem;
                line-height: normal;
                text-align: center;
                font-size: @font28;
                color: @color4;
                /*display: table;*/
                /*i{*/
                /*    display: table-cell;*/
                /*    vertical-align: middle;*/
                /*}*/
            }
        }
    }

    .center {
        width: 6.7rem;
        height: 6.24rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.06rem;
        margin: 0.3rem auto 0;
        box-shadow: 0 0 0.2rem rgba(240, 240, 240, 1);
        position: relative;

        p {
            font-size: @font24;
            font-weight: 400;
            color: rgba(166, 166, 179, 1);
            text-align: right;
            padding-right: 0.4rem;
            padding-top: 0.32rem;
            margin-top: 0.1rem;
        }

        #chartbox{
            margin: 0 auto;
            min-height: 3.36rem;
        }

        h1{
            position: absolute;
            left: 0;
            top: 1.9rem;
            text-align: center;
            width: 100%;

            font-size:0.42rem;
            font-weight:600;
            color:@color3;
        }
        h2{
            position: absolute;
            left: 0;
            top: 2.5rem;
            text-align: center;
            width: 100%;

            font-size:@font24;
            font-weight:600;
            color:@color3;
        }
        ul{
            overflow: hidden;
            margin-top: 0.8rem;
            li{
                float: left;
                width: 33.3%;
                span{
                    display: block;
                    text-align: center;
                    font-size:@font34;
                    font-weight:400;
                }
                i{
                    display: block;
                    margin-top: 0.05rem;
                    text-align: center;
                    font-size:@font24;
                    font-weight:400;
                    color:@color2;
                }
            }
            li:nth-child(1) span{
                color: #DAB92F;
            }
            li:nth-child(2) span{
                color: #6670F3;
            }
            li:nth-child(3) span{
                color: #FF462D;
            }
        }
    }

    .btmbox{
        overflow: hidden;
        margin-top: 0.4rem;
        h1{
            font-size:@font28;
            font-weight:normal;
            color:@color3;
            padding: 0 0.4rem;
        }
        div{
            margin: 0.3rem 0.4rem 0.1rem;
            box-shadow: 0 0 0.2rem rgba(240, 240, 240, 1);
        }
        table{
            width: 100%;

            z-index: 100;
            thead{
                background:rgba(255,234,226,1);
                th{
                    color: @color1;
                    font-weight: normal;
                }
            }

            th,td{
                height: 0.8rem;
                font-size: @font28;
                text-align: center;
                color: @color2;
            }
            td{
                border-bottom: 1px solid #efefef7a;
            }
        }
        h2{
            font-size:@font28;
            height: 0.8rem;
            font-weight:400;
            color:@color2;
            line-height:0.8rem;
            text-align: center;
            margin: 0 0.4rem 0;
        }
    }
</style>